/*!
 * Bootstrap Responsive v2.0.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world $twitter by $mdo and $fat.
 */

// Responsive.styl
// For phone and tablet devices
// -------------------------------------------------------------


// REPEAT VARIABLES & MIXINS
// -------------------------
// Required since we compile the responsive stuff separately

@import "variables.styl" // Modify this for custom colors, font-sizes, etc
@import "mixins.styl"


// RESPONSIVE CLASSES
// ------------------

// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden
  display: none
  visibility: hidden




// UP TO LANDSCAPE PHONE
// ---------------------

$media (max-width: 480px)

  // Smooth out the collapsing/expanding nav
  .nav-collapse
    -webkit-transform: translate3d(0, 0, 0) // activate the GPU


  // Block level the page header small tag for readability
  .page-header h1 small
    display: block
    line-height: $baseLineHeight


  // Make span* classes full width
  input[class*="span"],
  select[class*="span"],
  textarea[class*="span"],
  .uneditable-input
    display: block
    width: 100%
    min-height: 28px /* Make inputs at least the height of their button counterpart */
    /* Makes inputs behave like true block-level elements */
    -webkit-box-sizing: border-box /* Older Webkit */
       -moz-box-sizing: border-box /* Older FF */
        -ms-box-sizing: border-box /* IE8 */
            box-sizing: border-box /* CSS3 spec*/

  // But don't let it screw up prepend/append inputs
  .input-prepend input[class*="span"],
  .input-append input[class*="span"]
    width: auto


  // Update checkboxes for iOS
  input[type="checkbox"],
  input[type="radio"]
    border: 1px solid #ccc


  // Remove the horizontal form styles
  .form-horizontal .control-group > label
    float: none
    width: auto
    padding-top: 0
    text-align: left

  // Move over all input controls and content
  .form-horizontal .controls
    margin-left: 0

  // Move the options list down to align with labels
  .form-horizontal .control-list
    padding-top: 0 // has to be padding because margin collaspes

  // Move over buttons in .form-actions to align with .controls
  .form-horizontal .form-actions
    padding-left: 10px
    padding-right: 10px


  // Modals
  .modal
    position: absolute
    top:   10px
    left:  10px
    right: 10px
    width: auto
    margin: 0
    &.fade.in
      top: auto

  .modal-header .close
    padding: 10px
    margin: -10px


  // Carousel
  .carousel-caption
    position: static






// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------

$media (max-width: 767px)
  // GRID & CONTAINERS
  // -----------------
  // Remove width from containers
  .container
    width: auto
    padding: 0 20px

  // Fluid rows
  .row-fluid
    width: 100%

  // Undo negative margin on rows
  .row
    margin-left: 0

  // Make all columns even
  .row > [class*="span"],
  .row-fluid > [class*="span"]
    float: none
    display: block
    width: auto
    margin: 0





// PORTRAIT TABLET TO DEFAULT DESKTOP
// ----------------------------------

$media (min-width: 768px) and (max-width: 979px)

  // Fixed grid
  $gridSystem-generate(12, 42px, 20px)

  // Fluid grid
  $fluidGridSystem-generate(12, 5.801104972%, 2.762430939%)

  // Input grid
  $inputGridSystem-generate(12, 42px, 20px)





// TABLETS AND BELOW
// -----------------
$media (max-width: 979px)

  // UNFIX THE TOPBAR
  // ----------------
  // Remove any padding from the body
  body
    padding-top: 0

  // Unfix the navbar
  .navbar-fixed-top
    position: static
    margin-bottom: $baseLineHeight

  .navbar-fixed-top .navbar-inner
    padding: 5px

  .navbar .container
    width: auto
    padding: 0

  // Account for brand name
  .navbar .brand
    padding-left: 10px
    padding-right: 10px
    margin: 0 0 0 -5px

  // Nav collapse clears brand
  .navbar .nav-collapse
    clear: left

  // Block-level the nav
  .navbar .nav
    float: none
    margin: 0 0 ($baseLineHeight / 2)

  .navbar .nav > li
    float: none

  .navbar .nav > li > a
    margin-bottom: 2px

  .navbar .nav > .divider-vertical
    display: none

  .navbar .nav .nav-header
    color: $navbarText
    text-shadow: none

  // Nav and dropdown links in navbar
  .navbar .nav > li > a,
  .navbar .dropdown-menu a
    padding: 6px 15px
    font-weight: bold
    color: $navbarLinkColor
    $border-radius(3px)

  .navbar .dropdown-menu li + li a
    margin-bottom: 2px

  .navbar .nav > li > a:hover,
  .navbar .dropdown-menu a:hover
    background-color: $navbarBackground

  // Dropdowns in the navbar
  .navbar .dropdown-menu
    position: static
    top: auto
    left: auto
    float: none
    display: block
    max-width: none
    margin: 0 15px
    padding: 0
    background-color: transparent
    border: none
    $border-radius(0)
    $box-shadow(none)

  .navbar .dropdown-menu:before,
  .navbar .dropdown-menu:after
    display: none

  .navbar .dropdown-menu .divider
    display: none

  // Forms in navbar
  .navbar-form,
  .navbar-search
    float: none
    padding: ($baseLineHeight / 2) 15px
    margin: ($baseLineHeight / 2) 0
    border-top: 1px solid $navbarBackground
    border-bottom: 1px solid $navbarBackground
    $shadow = inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)
    $box-shadow($shadow)

  // Pull right (secondary) nav content
  .navbar .nav.pull-right
    float: none
    margin-left: 0

  // Static navbar
  .navbar-static .navbar-inner
    padding-left:  10px
    padding-right: 10px

  // Navbar button
  .btn-navbar
    display: block


  // Hide everything in the navbar save .brand and toggle button */
  .nav-collapse
    overflow: hidden
    height: 0





// DEFAULT DESKTOP
// ---------------

$media (min-width: 980px)
  .nav-collapse.collapse
    height: auto !important





// LARGE DESKTOP & UP
// ------------------

$media (min-width: 1200px)

  // Fixed grid
  $gridSystem-generate(12, 70px, 30px)

  // Fluid grid
  $fluidGridSystem-generate(12, 5.982905983%, 2.564102564%)

  // Input grid
  $inputGridSystem-generate(12, 70px, 30px)

  // Thumbnails
  .thumbnails
    margin-left: -30px

  .thumbnails > li
    margin-left: 30px




